<template>
  <div class="knowshop">
    <div class="shop-box">
      食谱<img :src="imgs" alt="">
      <div class="box-product">
        <h1>单品</h1>
        <div class="pro_pic" v-for="(item,index) in pro_imgs" :key="index">
          <img :src="item.pic" alt="">
          <div class="jiahao">
            <i class="iconfont icon-jia" @click="addShopToCar(item.id)"></i>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
  export default {
    name:"KnowShop",
    data(){
      return{
        imgs:require("../../../../assets/pimages/zhishi_shop1.jpg"),//  291*111
        pro_imgs:[
          {
            pic:require("../../../../assets/pimages/zhishi_shop2.jpg"),
            id: 2
          },
          {
            pic:require("../../../../assets/pimages/zhishi_shop3.jpg"),
            id: 3
          }
        ]
      }
    },
    methods: {
      ...mapMutations(['car/addProductToCar','car/checkShopState']),
      addShopToCar (id) {
        let shopData = {
          id: id,
          num: 1
        };
        this['car/checkShopState'](shopData)
        this['car/addProductToCar'](shopData)
        
      }
    }
  }
</script>

<style scoped>
.knowshop{
  width: 100%;

}
.shop-box{
  font-size: 0.30rem;
  letter-spacing: 0.2rem;
  padding-bottom: 0.5rem;
}
.shop-box img{
  margin-top: 0.2rem;
}
.box-product{
  margin-top: 0.2rem;
  padding: 0 0.5rem;
}
.box-product .pro_pic{
  width: 2rem;
  position: relative;
}
.pro_pic:nth-child(1){
  float: left;
}
.pro_pic:nth-child(2){
  float: right;
}
.jiahao{
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  top: -0.15rem;
  right: -0.2rem;
  color: #41ba8f;

}
</style>